<template>
    <div>
        <el-header>保存预发布列表</el-header>
        <el-input placeholder="请输入名字搜索" v-model="searchName" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="searchByName"></el-button>
        </el-input>
        <span style="display:inline-block; margin-right: 4px;margin-left: 8px" v-for="book in bookList" :key="book">
                     <router-link to="/bookDetail" >
                         <div @click="sendId(book)">
                    <van-image
                            style="display: block"
                            width="110"
                            height="100"
                            :src=book.bookImg
                    />
                    <span style="display:block;font-weight: bold;font-size: 13px">{{book.bookName}}</span>
                    <span>{{book.id}}</span>
                    <sapn style="display:block;color: red;font-size: 18px">￥{{book.bookPrice}}</sapn>
                             </div>
                         </router-link>
                   <el-button @click="deleteById(book.id)" >删除</el-button>
                   <el-button @click="save(book.id,book.bookImg,book.bookName,book.bookPrice,book.bookDesc)">发布</el-button>
                    <!--<van-image-->
                            <!--round-->
                            <!--width="20"-->
                            <!--height="20"-->
                            <!--:src=book.userImg-->
                    <!--/>-->
                    <!--<span style="color: blue">{{book.userName}}</span>-->
        </span>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
        </van-list>
        <!--<el-table-->
                <!--:data="bookList"-->
                <!--style="width: 100%">-->
            <!--<el-table-column-->
                    <!--prop="id"-->
                    <!--label="编号"-->
                    <!--width="180">-->
            <!--</el-table-column>-->
            <!--<el-table-column-->
                    <!--prop="bookName"-->
                    <!--label="书名"-->
                    <!--width="180">-->
            <!--</el-table-column>-->
            <!--<el-table-column  label="预览">-->
                <!--<template slot-scope="scope">-->
                    <!--<el-image style="width: 30px; height: 30px" :src="scope.row.bookImg" :preview-src-list="[scope.row.book_img]">-->
                        <!--<div slot="error" class="image-slot">-->
                            <!--<i class="el-icon-picture-outline"></i>-->
                        <!--</div>-->
                    <!--</el-image>-->
                <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column-->
                    <!--prop="bookPrice"-->
                    <!--label="价格">-->
            <!--</el-table-column>-->
            <!--<el-table-column label="操作">-->
                <!--<template slot-scope="scope">-->
                    <!--<el-button-->
                            <!--size="mini"-->
                            <!--@click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                    <!--<el-button-->
                            <!--size="mini"-->
                            <!--type="danger"-->
                            <!--@click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
                <!--</template>-->
            <!--</el-table-column>-->
        <!--</el-table>-->
<!--        <van-tabbar>-->
<!--            <router-link to="/index">首页</router-link>-->
<!--        </van-tabbar>-->
      <buttom/>
    </div>
</template>

<script>
import buttom from "@/components/book/buttom";

    export default {
        name: "KeepList",
      components:{
          buttom
      },
        data(){
            return{
                loading: false,
                finished: false,
                user: this.$store.state.userinfo.user!=null?this.$store.state.userinfo.user.user.id:'',
                bookList:[],
                searchName:'', //根据name搜索图书
                bookName:'',
                userId:'',
                bookId:'',
                bookImg:'',
                bookPrice:'',
                bookDesc:'',

            }
        },
        methods:{
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    // 加载状态结束
                    this.loading = false;
                    // 数据全部加载完成
                    this.finished = true;

                }, 100);
            },
            searchByName(){
                var _this=this;
                var name = this.searchName;
                _this.axios.post(
                     "/bookKeep/list",
                     // name
                    {
                        bookName:name,
                        userId:this.user,
                    },
                ).then(function (response) {
                    console.log("进来了")
                    _this.bookList = response.data.data.bookKeepList;
                })

            },
            deleteById(id){
                var _this=this;
                _this.axios.post(
                    "/bookKeep/delete",
                    {
                        bookId:id,
                        userId:this.user,
                    },
                ).then(function(response){
                    console.log(response);
                    _this.bookList = response.data.data.bookList;
                    console.log( _this.bookList)
                    alert("删除成功!")
                }).catch((error) => {
                    alert("删除失败!!")
                })
            },
            save(id,bookImg,bookName,bookPrice,bookDesc){
                var _this=this;
                _this.axios.post(
                    "/bookKeep/save",
                    {
                        bookId:id,
                        bookImg:bookImg,
                        bookName:bookName,
                        bookPrice:bookPrice,
                        bookDesc:bookDesc,
                        userId:this.user,
                    },

                ).then(function(response){
                        console.log(response);
                        _this.bookList = response.data.data.bookList;
                        console.log( _this.bookList)
                        alert("发布成功!")
                    }).catch((error) => {
                        alert("发布失败!!")
                    })
            }
            // deleteById(id){
            //     this.axios({
            //         method:"get",
            //         url:"http://localhost:8080/bookKeep/delete/"+id+"",
            //     }).then((response) => {
            //         console.log(response);
            //         this.bookList-=response.data.data.deleteList;
            //         alert("删除成功!")
            //     }).catch((error) => {
            //         alert("删除失败!!")
            //     })
            // }
        },

        created() {
            this.axios.get('/bookKeep/list/'+this.user+"").then(
                Response => {
                    console.log(Response)
                    this.bookList = Response.data.data.bookList;
                },
                error => {

                }
            )
        }
    }
</script>

<style scoped>

</style>